// popper 弹出面板
@mixin popper-panel {
    position: absolute;
    z-index: $--index-center;
    border: $--border-width-base $--border-style-base $--border-color-light;
    border-radius: $--border-radius-base;
    background-color: $--color-white;
    box-shadow: $--box-shadow-light;
    box-sizing: border-box;
    display: none;
}

// popper -> 滑动节点
@mixin popper-slide($name) {
    .foxui-#{$name}-slide {
        margin: $--popper-margin 0;
        max-height: $--popper-line-height * 6;
        overflow: auto;
    }

    .foxui-#{$name}-item {
        padding: 0 $--popper-padding;
        cursor: pointer;
        line-height: $--popper-line-height;
        font-size: $--popper-font-size;
        outline: none;

        &:hover {
            color: $--color-primary-light-1;
            background-color: $--color-primary-light-9;
        }
    }

    .foxui-#{$name}-item-title {
        padding: 0 $--popper-padding;
        font-size: $--popper-title-font-size;
        line-height: $--popper-title-line-height;
        color: $--popper-title-color;
    }

    .foxui-divided {
        height: 1px;
        margin: $--popper-margin $--popper-padding;
        background-color: $--border-color-base;
    }

    &.foxui-size-medium {
        .foxui-#{$name}-slide {
            margin: $--popper-medium-margin 0;
            max-height: $--popper-medium-line-height * 6;
        }

        .foxui-#{$name}-item {
            padding: 0 $--popper-medium-padding;
            line-height: $--popper-medium-line-height;
            font-size: $--popper-medium-font-size;
        }

        .foxui-#{$name}-item-title {
            padding: 0 $--popper-medium-padding;
        }

        .foxui-divided {
            margin: $--popper-medium-margin $--popper-medium-padding;
        }
    }

    &.foxui-size-small {
        .foxui-#{$name}-slide {
            margin: $--popper-small-margin 0;
            max-height: $--popper-small-line-height * 6;
        }

        .foxui-#{$name}-item {
            padding: 0 $--popper-small-padding;
            line-height: $--popper-small-line-height;
            font-size: $--popper-small-font-size;
        }

        .foxui-#{$name}-item-title {
            padding: 0 $--popper-small-padding;
        }

        .foxui-divided {
            margin: $--popper-small-margin $--popper-small-padding;
        }
    }

    &.foxui-size-mini {
        .foxui-#{$name}-slide {
            margin: $--popper-mini-margin 0;
            max-height: $--popper-mini-line-height * 6;
        }

        .foxui-#{$name}-item {
            padding: 0 $--popper-mini-padding;
            line-height: $--popper-mini-line-height;
            font-size: $--popper-mini-font-size;
        }

        .foxui-#{$name}-item-title {
            padding: 0 $--popper-mini-padding;
        }

        .foxui-divided {
            margin: $--popper-mini-margin $--popper-mini-padding;
        }
    }
}

// 清空输入框 icon
@mixin clear-input-icon() {
    .foxui-icon-cuowu-o {
        position: absolute;
        right: 1px;
        background-color: $--color-white;
        z-index: 1;
        color: $--input-clear-hover-color;
        width: 30px;
        height: 90%;
        display: none;
        justify-content: center;
        align-items: center;
        border-radius: 4px;

        &:hover {
            color: $--color-text-regular;
        }
    }
}
